<template>
    <div class="signin">
        <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
        <div class="sign-box">
            <div class="rule color-f fs-24 center">规则</div>
            <div class="sign-btn center color-f" @click="signIn()">{{getSignObj.is_sign === 1 ? '已签到' : '签到'}}</div>
            <p class="text fs-24 color-f center">您已连签到{{getSignObj.always_num}}天，请继续加油哦!</p>
        </div>
        <div class="num-data padding-24">
            <div class="contents bg-f center-col">
                <div class="contents-item after">
                    <p class="color-3 num center">{{getSignObj.points}}</p>
                    <div class="kinds center">
                        <div class="yuan center">
                            <img :src="jifen" alt="">
                        </div>
                        <p class="color-6">积分</p>
                    </div>
                </div>
                <!-- @click="$router.push('/signin-record')" -->
                 <div class="contents-item" @click="$router.push('/signin-record')">
                    <p class="color-3 num center">{{getSignObj.sign_num}}</p>
                    <div class="kinds center">
                        <img :src="daynum" alt="">
                        <p class="color-6 ">签到天数</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="gift padding-24" v-if="couponlist[0]">
            <div class="gift-content bg-f padding-24">
                <p class="title fs-32">签到礼包</p>
                <div class="gift-list" v-for="(item,index) in couponlist" :key="index">
                    <div class="list-item space-between " :style="bg">
                        <div class="left">
                            <p class="fs-30 color-f">&yen;<span>{{item.price}}</span></p>
                            <p class="color-f">满{{item.total}}可用</p>
                        </div>
                        <div class="right space-between">
                            <div>
                                <p class="fs-32">商城满减券</p>
                                <p class="fs-24 color-9">{{item.jf}}个积分可兑换</p>
                            </div>
                            <div class="bg-r color-f fs-24 center">兑换</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            day:10,
            isBack:true,
            title:'每日签到',
            bg:{
                backgroundImage: "url(" + require("../../assets/account/coupon.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%",
            },
            jifen:require("../../assets/account/jifen.png"),
            daynum:require("../../assets/account/daynum.png"),
            couponlist:[
                {
                    price:10,
                    total:100,
                    jf:300,
                },
                {
                    price:10,
                    total:100,
                    jf:300,
                }
            ],
            getSignObj:{}
        }
    },
    mounted(){
        this.getSignInMsg()
    },
    methods:{
        signIn(){
            var url = this.$host1 + `home/sign/signToAddPoints` 
            this.$axios.post(url).then((res)=>{
                if(res.data.code === 200){
                    this.getSignInMsg()
                }else{
                    this.AlertWin(res.data.message);
                }
            })
        },
        getSignInMsg(){
            var url = this.$host1 + `home/sign/signCenterMsg` 
            this.$axios.get(url).then((res)=>{
                this.getSignObj=res.data.data
            })
        }
    }
}
</script>
<style lang="scss">
.signin{
    margin-bottom: 0.2rem;
    .sign-box{
        padding-top: 0.001rem;
        margin-top: 1rem;
        width: 100%;
        height: 4rem;
        position: relative;
        background: linear-gradient(to bottom,#680DAE,#9529C6);
        .rule{
            width:1.1rem;
            height:0.4rem;
            background:#b17cd1;
            position: absolute;
            right: 0;
            top:0.1rem;
            border-radius:0.2rem 0 0 0.2rem;
        }
        .sign-btn{
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 50%;
            font-size: 0.46rem;
            margin: 0.5rem auto 0;
            background-color: #FFB200;
        }
        .text{
            margin-top: 0.3rem;
        }
    }
    .num-data{
        position: absolute;
        margin-top: -1rem;
        height: 1.9rem; 
        .contents{
            width: 100%;
            height: 100%;
            border-radius: 0.1rem;
            .contents-item{
                position: relative;
                width: 50%;
                height: 1.5rem;
                //background-color: greenyellow;
                .num{
                    font-size: 0.72rem;
                }
                .kinds{
                    width: auto;
                    //background-color: greenyellow;
                    text-align: center;
                    margin: 0.2rem auto 0;
                    .yuan{
                        width: 0.38rem;
                        height: 0.38rem;
                        border-radius: 50%;
                        margin-right: 0.1rem;
                        background: linear-gradient(0deg,rgba(249,225,70,1) 0%,rgba(254,194,70,1) 100%);
                        img{
                            //margin-top: 0.06rem;
                            width: 0.26rem;
                            height: 0.26rem;
                            margin-right: 0;
                        }
                    }
                    img{
                        width: 0.38rem;
                        height: 0.38rem;
                        margin-right: 0.1rem;
                    }
                }
            }
            .after::after{
                content:'';
                width: 0;
                height: 1.5rem;
                position: absolute;
                right: 0;
                margin-top: -1.45rem;
                border-left:0.01rem solid #efefef; 
            }
        }
    }
    .gift{
        height: auto;
        margin-top: 1.2rem;
        .gift-content{
            width: 100%;
            border-radius: 0.1rem;
            .title{
                line-height: 1rem;
            }
            .gift-list{
                padding-bottom: 0.2rem;
                width: 100%;
                height: auto;
                .list-item{
                    border: 0.01rem solid #e9e9e9;
                    border-radius: 0.15rem;
                    width: 100%;
                    height: 1.68rem;
                    margin-bottom: 0.2rem;
                    padding: 0 0.1rem;
                    box-sizing: border-box;
                    .left{
                        width: 1.5rem;
                        //background-color: green;
                        span{
                            font-size: 0.6rem
                        }
                    }
                    .right{
                        width: calc(100% - 1.8rem);
                        //background-color: #680DAE;
                        .color-9{
                            margin-top: 0.1rem;
                        }
                        .bg-r{
                            width:1.2rem;
                            height:0.4rem;
                            border-radius:0.2rem;
                        }
                    }
                }
            }
        }
    }
}
</style>
